<template>
  <a-modal :title="user_title" style="top: 100px;" :visible="isShow" width="1300px" @cancel="handleCancel" @ok="handleCancel">
    <div id="main" style="width: 100%px;height:400px;"></div>
  </a-modal>
  
</template>
<script>
  import moment from 'moment'
  import ISwitch from '@/components/ISwitch/ISwitch'
  import IDatePicker from "@/components/IDatePicker/IDatePicker.vue"
  import * as echarts from 'echarts';
  
  const resourceType = 'stats/top-user-record'
  const resourceTypeText = '用户消费趋势曲线'
  
  export default {
    components: {
      ISwitch,
      IDatePicker
    },
    props: {
      params: {
        type: Object
      },
      user_info: {
        type: Object
      },
      isShow: {
        type: Boolean
      },
      user_id: {
        type: Number
      },
      search_type: {
        type: String
      }
    },
    data() {
      return {
        size: 'default',
        search_type_title: '',
        user_title: '',
        list: [],
        typeList: [
          {
            type: 'today_pay_money_price',
            title: '每日实付金额-曲线',
          },
          {
            type: 'today_loss_money_price',
            title: '每日亏损盈利金额-曲线',
          }
        ],
      }
    },
    watch: {
      params() {
        this.refreshData()
      }   
    },
    computed: {
    },
    created() {
      let item = this.typeList;
      let now_type = this.typeList.find(item => item.type === this.search_type)
      this.search_type_title = now_type.title
      this.user_title = '【' + this.user_info.name + ' - ' + this.user_info.phone + '】 的消费趋势数据'
      
      this.fetchData()
    },
    methods: {
      handleCancel() {
        this.$emit('hide')
      },
      refreshData() {
        this.fetchData()
      },
      initEchart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        var option = {
        title: {
          text: this.search_type_title,
          //subtext: '2023年1月1日至2023年8月16日'
        },
        xAxis: {
          type: 'category',
          data: this.list.map(item => item.date) // 按照实际日期填充
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 元' // y轴标签格式化为金额单位
          }
        },
        dataZoom: [
            {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter'
            }
        ],
        series: [
          {
            name: '金额',
            type: 'line',
            smooth: true, // 开启平滑线
            data: this.list.map(item => item.money_price) // 按照实际金额填充数据
          }
        ]
        }
        // 绘制图表
        myChart.setOption(option);
        
        // 添加事件监听，实现鼠标移动到点上显示数据的功能
        myChart.on('mousemove', function (params) {
            var dataIndex = params.dataIndex;
            var seriesIndex = params.seriesIndex;
            var data = option.series[seriesIndex].data;
            var value = data[dataIndex];
            var xAxisData = option.xAxis.data[dataIndex];
            myChart.setOption({
                tooltip: {
                    show: true,
                    trigger: 'item',
                    position: [params.event.offsetX, params.event.offsetY],
                    formatter: function (params) {
                        return '时间：' + xAxisData + '<br/>金额：' + value + '元';
                    }
                }
            });
        });
        // 添加事件监听，实现鼠标移出点后隐藏数据
        myChart.on('mouseout', function (params) {
            myChart.setOption({
                tooltip: {
                    show: false
                }
            });
        });
      },
      fetchData() {
        this.isEdit = false
        this.$http.get(`/${resourceType}`, {
          params: {
            ...this.params,
            user_id: this.user_id,
            search_type: this.search_type,
            page: this.page,
            per_page: this.per_page,
          }
        }).then(res => {
          this.list = res.data
          this.initEchart()
        }).finally(() => {
          this.loading = false
        })

      },
    }
  }
</script>
<style lang="scss" scoped>
  .value-font {
    font-weight: 500;
    font-size: 110%;
	margin-right:20px;
  }
  .content-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .sort-keys {
    display: flex;
    align-items: center;

    .tab-list {
      display: flex;
      margin-top: 6px;
      border-bottom: 1px solid #e1e1e1;
      margin-right: 50px;

      .item {
        margin-right: 30px;
        padding: 0px 10px 4px 10px;
        cursor: pointer;
        font-weight: 500;

        &.actived {
          color: #1890FF;
          border-bottom: 3px solid #1890FF;
        }

        &:hover {
          color: #1890FF;
        }
      }
    }

  }

  .table {
    .thumb {
      height: 60px;
      border-radius: 6px;
    }

    .content-image {
      height: 60px;
      width: 60px;
      margin-right: 10px;
      margin-bottom: 10px;
      object-fit: cover;
      border-radius: 10px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }

    .user {
      display: flex;
      // flex-wrap: wrap;
      align-items: center;
      img {
        width: 26px;
        height: 26px;
        margin-right: 6px;
        border-radius: 50%;
        overflow: hidden;
      }
      .gender-man, .gender-woman {
        margin-left: 5px;
        font-size: 12px;
      }
      .gender-man {
        color: #409EFF;
      }
      .gender-woman {
        color: #F56C6C;
      }
    }
  }
</style>
